<template>
  <div class="product-edit-container">
    <h2 class="title">商品修改</h2>
    <div class="underline"></div>
    
    <div class="search-section">
      <input 
        v-model="searchId" 
        type="number" 
        placeholder="请输入要修改的商品ID" 
        class="search-input"
      >
      <button class="search-btn" @click="fetchProduct">查询商品</button>
    </div>
    
    <div class="form-container" v-if="productFound">
      <div class="form-item" v-for="field in fields" :key="field.key">
        <span class="label">{{ field.label }}：</span>
        <input 
          v-model="formData[field.key]" 
          :type="field.type || 'text'" 
          class="input-field"
          :placeholder="'请输入' + field.label"
        >
      </div>
    </div>
    
    <div class="message" v-if="message">{{ message }}</div>
    
    <div class="button-group" v-if="productFound">
      <button class="update-btn" @click="updateProduct">修改商品</button>
      <button class="reset-btn" @click="resetForm">重置</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 表单字段配置
const fields = [
  { key: 'id', label: '商品ID', type: 'number', disabled: true },
  { key: 'pname', label: '商品名称' },
  { key: 'imgurl', label: '图片URL' },
  { key: 'oldprice', label: '原价', type: 'number' },
  { key: 'newprice', label: '现价', type: 'number' },
  { key: 'color', label: '颜色' },
  { key: 'size', label: '尺寸' },
  { key: 'count', label: '库存数量', type: 'number' },
  { key: 'status', label: '状态', type: 'number' },
  { key: 'description', label: '商品描述' },
  { key: 'category_id', label: '分类ID', type: 'number' }
];

const searchId = ref('');
const formData = ref(createEmptyForm());
const productFound = ref(false);
const message = ref('');

function createEmptyForm() {
  return {
    id: '',
    pname: '',
    imgurl: '',
    oldprice: '',
    newprice: '',
    color: '',
    size: '',
    count: '',
    status: '',
    description: '',
    category_id: ''
  };
}

// 查询商品
const fetchProduct = async () => {
  if (!searchId.value) {
    message.value = '请输入商品ID';
    return;
  }
  
  try {
    const response = await axios.get(`http://moveshop/product/${searchId.value}`);
    
    if (response.data.code === 200 && response.data.data) {
      formData.value = response.data.data;
      productFound.value = true;
      message.value = '';
    } else {
      productFound.value = false;
      message.value = '未找到该商品';
    }
  } catch (error) {
    console.error('查询商品出错:', error);
    productFound.value = false;
    message.value = '查询商品时出错';
  }
};

// 更新商品
const updateProduct = async () => {
  if (!formData.value.id) {
    message.value = '请先查询要修改的商品';
    return;
  }
  
  try {
    const response = await axios.put(
      `http://your-api-endpoint/product/${formData.value.id}`,
      formData.value
    );
    
    if (response.data.code === 200) {
      message.value = '商品修改成功';
    } else {
      message.value = '商品修改失败: ' + response.data.message;
    }
  } catch (error) {
    console.error('修改商品出错:', error);
    message.value = '修改商品时出错';
  }
};

// 重置表单
const resetForm = () => {
  if (formData.value.id) {
    fetchProduct(); // 重新获取原始数据
  } else {
    formData.value = createEmptyForm();
  }
  message.value = '';
};
</script>

<style scoped>
.product-edit-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  text-align: center;
  color: #333;
  margin-bottom: 10px;
}

.underline {
  height: 2px;
  background-color: #1890ff;
  width: 100px;
  margin: 0 auto 20px;
}

.search-section {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn {
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #40a9ff;
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.form-item {
  display: flex;
  align-items: center;
}

.label {
  width: 120px;
  text-align: right;
  padding-right: 15px;
  color: #666;
  font-size: 14px;
}

.input-field {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-field:focus {
  border-color: #1890ff;
  outline: none;
}

.input-field[disabled] {
  background-color: #f5f5f5;
  color: #999;
}

.message {
  text-align: center;
  color: #ff4d4f;
  margin: 10px 0;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.update-btn, .reset-btn {
  padding: 10px 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.update-btn {
  background-color: #1890ff;
  color: white;
}

.update-btn:hover {
  background-color: #40a9ff;
}

.reset-btn {
  background-color: #f5f5f5;
  color: #666;
}

.reset-btn:hover {
  background-color: #e6e6e6;
}
</style>